<template>
  <div class="isqualified">
        <div class="isq-title">
              <div class="model tab-title">型号</div>
              <div class="day-group">
                   <div class="day tab-title">当日</div>
                   <div class="isqua">
                        <div class="day-qua tab-title">合格</div>
                        <div class="day-unq tab-title">不合格</div>
                   </div>
              </div>
              <div class="month-group">
                   <div class="month tab-title">当月</div>
                   <div class="isqua">
                        <div class="month-qua tab-title">合格</div>
                        <div class="month-unq tab-title">不合格</div>
                   </div>
              </div>
        </div>
        
        <ul class="isq-table" v-for="item of tableList">
        	 <li class="tab-border" v-for="item of borderList"></li>
        </ul>  
        
        <div class="isq-data-wrapper">
	        <ul class="isq-data" v-for="item of list" :key="item.id">
	             <li class="tab-content model-data">{{item.modelData}}</li>
	             <li class="tab-content day-qualified">{{item.dayQualified}}</li>
	             <li class="tab-content day-unqualified">{{item.dayUnqualified}}</li>
	             <li class="tab-content month-qualified">{{item.monthQualified}}</li>
	             <li class="tab-content month-unqualified">{{item.monthUnqualified}}</li>
	        </ul>
        </div>
    
  </div>
</template>

<script>
export default {
  props:{
    list:Array
  },	
  data () {
    return {
    	  borderList:["1","2","3","4","5"],
    	  tableList:["1","2","3","4","5","6","7","8"]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.isqualified{
	width:100%;
	height:650px;
	position:relative;
}	
.isqualified .isq-title{
	height:130px;
	border:1px solid #26aab7;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	box-sizing:border-box;
	display:flex;
	justify-content: space-between;
	align-items: center;
}
		
.isq-title .model{
	width:20%;
	height: 130px;
	line-height: 130px;
	text-align:center;
	border-right: 1px solid #26aab7;
	box-sizing:border-box;
}

			
.day-group,.month-group{
	width:40%;
	height:130px;
}

.day-group{
	border-right:1px solid #26aab7;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
}	

.day,.month{
	width:100%;
	height:65px;
	line-height:65px;
	text-align:center;
	border-bottom: 1px solid #26aab7;
	box-sizing:border-box;
}

.isqua{
	width:100%;
	height:65px;
	display:flex;
	align-items:center;
}
	
.day-qua,.month-qua{
	width:50%;
	height:65px;
	line-height:65px;
	text-align:center;
	border-right: 1px solid #26aab7;
}
	
.day-unq,.month-unq{
	width:50%;
	height:65px;
	line-height:65px;
	text-align:center;
}
	

.isq-table{
	width: 100%;
	height: 65px;
	border-left: 1px solid #26aab7;
	border-right: 1px solid #26aab7;
	border-bottom: 1px solid #26aab7;
	box-sizing:border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.isq-table li{
	height: 65px;
	line-height:65px;
	width: 20%;
	border-right: 1px solid #26aab7;
	box-sizing:border-box;
	text-align:center;
}
.isq-table li:last-child{
	border:none;
}	
.isq-table:nth-child(9){
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
	

.tab-title{
	font-size:30px;
	color:#fff;
}
	
.tab-content{
	font-size:24px;
	color:#26aab7;
}


.isq-data-wrapper{
	width:100%;
	height:520px;
	overflow:hidden;
	position:absolute;
	top:130px;
}
.isq-data{
	width:100%;
	height:65px;
	box-sizing:border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
		
.isq-data li{
	height: 65px;
	line-height:65px;
	width: 20%;
	box-sizing:border-box;
	text-align:center;
}
			
</style>